<template>
	<view class="login-container mt-4 p-2">
		<view class="text-center">
			<image class="" src="/static/logo.png" style="width: 140rpx; height: 140rpx;"></image>
		</view>
		<view class="mt-4">
			<view class="p-2 border-bottom">
				<input class="input-field" placeholder="请输入手机号" v-model="user.mobile" />
			</view>
			<view class="p-2 border-bottom d-flex j-sb">
				<input class="flex-1" placeholder="请输入验证码" v-model="user.smscode" />
				<tll-countdown ref="countdown" :seconds="10" @timeup="timeup" @click="onCountDownClick"></tll-countdown>
			</view>
		</view>
		<view class="mt-4">
			<view class="bg-info" style="height: 50rpx;">
				<button class="btn" type="warn" @click="loginClick">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref ,reactive} from 'vue'
	import tllCountdown from '@/components/tll-countdown.vue'
	import userHttp from '@/apis/user/userHttp'
	import { useRouter } from 'vue-router'
	import useAuthStore from '@/stores/auth'

	const router = useRouter()
	const authStore = useAuthStore()
	const user = reactive({
		mobile: '',
		smscode: ''
	})
	const countdown = ref()
	const onCountDownClick = async() => {
		const mobileRegex = /^1[3456789]\d{9}$/
		if (!mobileRegex.test(user.mobile)) {
			uni.showModal({
				title: '提示',
				content: '请输入正确的手机号'
			})
			return
		}
		const res=await userHttp.getSMSCode(user.mobile)
		if(res['result']==1){
			uni.showToast({
				title: "验证码发送成功"
			})
		}
		countdown.value.start()
	}

	const loginClick = async() => {
		if (!user.mobile) {
			uni.showToast({
				title: '请输入手机号'
			})
			return
		}
		if (!user.smscode) {
			uni.showToast({
				title: '请输入验证码'
			})
			return
		}
		const res = await userHttp.login(user.mobile,user.smscode)
		authStore.setUserToken(res.user)
		authStore.setAccessToken(res.access_token)
		authStore.setRefreshToken(res.refresh_token)
		// 如果跳转页面在tabbar中,需要使用switchTab
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
</style>
